import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/Layout'
import { ElMessage } from "element-plus";

export const routes = [
    {
        path: '/login',
        component: () => import('@/views/login/index'),
        hidden: true,
        meta: {
            title: '文章管理系统 | 登录'
        }
    },
    {
        path: '/register',
        component: () => import('@/views/register/index'),
        hidden: true,
        meta: {
            title: '文章管理系统 | 注册'
        }
    },
    {
        path: '/404',
        component: () => import('@/views/404'),
        hidden: true,
        meta: {
            title: '文章管理系统 | 404'
        }
    },
    {
        path: '/',
        component: Layout,
        beforeEnter: (to, from, next) => {
            if (localStorage.getItem('token')) {
                next()
            } else {
                ElMessage.error('请先登录')
                next({path: '/login'})
            }
        },
        redirect: '/main',
        children:[
            {
                path: '/main',
                name: 'Main',
                component: () => import('@/views/Main'),
                meta: {
                    title: '首页',
                    icon: 'House'
                }
            },
            {
                path: '',
                name: 'ArticleAdministration',
                meta: {
                    title: '文章管理',
                    icon: 'List'
                },
                children: [
                    {
                        path: 'articleClassification',
                        name: 'ArticleClassification',
                        meta: {
                            title: '文章分类',
                            icon: 'DocumentCopy'
                        },
                        component: () => import('@/views/article/articleClassification')
                    },
                    {
                        path: 'articleList',
                        name: 'ArticleList',
                        meta: {
                            title: '文章列表',
                            icon: 'Tickets'
                        },
                        component: () => import('@/views/article/articleList')
                    }
                ]
            },
            {
                path: '',
                name: 'UserCenter',
                meta: {
                    title: '个人中心',
                    icon: 'User'
                },
                children:[
                    {
                        path: 'changeUserMsg',
                        name: 'ChangeUserMsg',
                        component: () => import('@/views/userCenter/changeUserInfo'),
                        meta: {
                            title: '基本信息',
                            icon: 'Operation'
                        }
                    },
                    {
                        path: 'changeUserPic',
                        name: 'ChangeUserPic',
                        component: () => import('@/views/userCenter/changeUserPic'),
                        meta: {
                            title: '更换头像',
                            icon: 'CameraFilled'
                        }
                    },
                    {
                        path: 'changeUserPassword',
                        name: 'ChangeUserPassword',
                        component: () => import('@/views/userCenter/changePassword'),
                        meta: {
                            title: '重置密码',
                            icon: 'key'
                        }
                    }
                ]
            }
        ]
    }

]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})


router.beforeEach((to, from, next) => {
    let token = localStorage.getItem('token')
    const whiteList = ['/login', '/404', '/register']
    if(to.matched.length === 0){
        next('/404')
    }else{
        if (token !== '') {
            next()
        }else {
            if (whiteList.includes(to.path)){
                next()
            } else {
                ElMessage.error('请先登录')
                next('/login')
            }
        }
    }
})

router.afterEach((to) => {
    // 改页面名字
    document.title = to.meta.title

})


export default router
